<template>
  <div class="dialog">
    <el-dialog :title="title" :visible.sync="isShowDialogComponent"
               width="60%" :before-close="handleClose">
      <div class="dialog-desc" v-if="judgeId===0">（*此页均为必填项，学科班级一项应分别填入学科信息和班级信息，例如:计算机一班）</div>
      <div class="dialog-desc" v-else>（*此页数据仅作展示，不支持修改）</div>
      <el-form label-width="110px" ref="formRef"
               :rules="formRules"
               :model="form" v-loading="loading"
               element-loading-text="拼命加载中......"
               element-loading-spinner="el-icon-loading">

        <div class="span-box">
          <el-form-item label="学科班级 :" prop="Subject">
            <el-input v-model="form.Subject" :disabled="judgeId!==0"></el-input>
          </el-form-item>
        </div>

        <div class="span-box" v-if="judgeId===0">
          <el-form-item label="用户姓名 :" prop="Name">
            <el-input v-model="form.Name" :max-length="20"></el-input>
          </el-form-item>
          <el-form-item label="用户手机 :" class="second-box" prop="Phone">
            <el-input v-model="form.Phone" ></el-input>
          </el-form-item>
        </div>

        <div class="span-box"   v-if="judgeId!==0">
          <el-form-item label="学生编号" >
            <el-input v-model="form.StudentNo":disabled="judgeId!==0" ></el-input>
          </el-form-item>
          <el-form-item label="用户姓名 :" prop="Name" class="second-box">
            <el-input v-model="form.Name" :max-length="20" :disabled="judgeId!==0"></el-input>
          </el-form-item>
        </div>

        <div class="span-box" v-if="judgeId!==0">
          <el-form-item label="用户性别 :" prop="Sex" v-if="judgeId!==0">
            <el-input v-model="form.Sex"  :disabled="judgeId!==0"></el-input>
          </el-form-item>
          <el-form-item label="用户手机 :" class="second-box" prop="Phone">
            <el-input v-model="form.Phone" :disabled="judgeId!==0"></el-input>
          </el-form-item>
        </div>





        <div class="span-box">
          <el-form-item label="身份证号 :" prop="IdentityID">
            <el-input v-model="form.IdentityID" :disabled="judgeId!==0"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址 :" class="second-box" prop="Address">
            <el-input v-model="form.Address" :maxlength="50" :disabled="judgeId!==0"></el-input>
          </el-form-item>
        </div>

        <div class="span-box">
          <el-form-item label="	亲属姓名 :" prop="RelativesName">
            <el-input v-model="form.RelativesName" :maxlength="20" :disabled="judgeId!==0"></el-input>
          </el-form-item>
          <el-form-item label="亲属关系 :" class="second-box">
            <el-select v-model="form.Relation" :disabled="judgeId!==0" placeholder="请选择亲属关系">
              <el-option
                v-for="item in relationData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <div class="span-box">
          <el-form-item label="亲属手机号 :" prop="RelativesPhone">
            <el-input v-model="form.RelativesPhone" :disabled="judgeId!==0"></el-input>
          </el-form-item>
        </div>

        <div class="span-box">
          <el-form-item label="个人头像 :">
            <upload-img
              @showImage="peopleShowImage"
              :width="9"
              :height="16"
              :judge-id="judgeId"
              :image="form.Image"
            ></upload-img>
          </el-form-item>
          <el-form-item label="签名图片 :" class="sign-box">
            <upload-img
              :width="16"
              :height="9"
              @showImage="singShowImage"
              :judge-id="judgeId"
              :image="form.SignatureImage"
            ></upload-img>
          </el-form-item>
          <el-form-item label="身份证正面 :" >
            <upload-img
              :width="16"
              :height="9"
              @showImage="identityShowImage"
              :judge-id="judgeId"
              :image="form.FrontCard"
              :is-show-letter="false"
            ></upload-img>
          </el-form-item>

        </div>

      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose" :disabled="loading">取 消</el-button>
    <el-button type="primary" @click="submitEvent" :disabled="loading">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
//引入封装的接口的类
import RegistrationForm from '../../../model/registrationForm'
//引入图片上传组件
import UploadImg from '../../../components/base/uploadPictures/UploadImg'
//引入验证
import ProofRules from '../../../ck/util/proofRules'

export default {
  name: 'DetailDialog',
  components: { UploadImg },
  props: {
    isShowDialogComponent: Boolean,
    judgeId: Number,
    title: String
  },
  data () {
    return {
      //加载
      loading: false,
      //新增表单
      form: {
        Subject: '',
        Phone: '',
        Name: '',
        Address: '',
        IdentityID: '',
        RelativesName: '',
        Relation: '',
        RelativesPhone: '',
        //录入方式 0 PC管理端 2小程序管理端
        SaveMode: 0,
        Image: '',
        SignatureImage: '',
        FrontCard: '',
        //学生编号
        StudentNo:'',
        Sex:''
      },
      relationData: [{
        value: '配偶',
        label: '配偶'
      }, {
        value: '子女',
        label: '子女'
      }, {
        value: '父母',
        label: '父母'
      }, {
        value: '其他',
        label: '其他'
      }],
      formRules: {
        Subject: ProofRules.requiredField('学科和班级信息'),
        Name: ProofRules.requiredFieldAndLength('用户姓名', 2, 20),
        Phone: ProofRules.MobileMethod('用户手机'),
        IdentityID: ProofRules.identityMethod('身份证号'),
        RelativesName: ProofRules.requiredFieldAndLength('亲属姓名', 2, 20),
        RelativesPhone: ProofRules.MobileMethod('亲属手机号'),
        Address: ProofRules.requiredFieldAndLength('家庭住址', 5, 50)
      }
    }
  },
  created () {
    this.judgeEditButton()
  },
  methods: {
    handleClose (payload) {
      this.$emit('handleClose', payload)
    },
    peopleShowImage (showImageUrl) {
      console.log(showImageUrl)
      this.form.Image = showImageUrl
    },
    singShowImage (showImageUrl) {
      this.form.SignatureImage = showImageUrl
    },
    identityShowImage (showImageUrl) {
      this.form.FrontCard = showImageUrl
    },
    //点击对话框确定
    async submitEvent () {
      //进行表单验证
      await this.$refs.formRef.validate(async valid => {
        if (!valid) {
          return this.$message.error('请填写表单必填项')
        } else {
          if (this.form.Relation === '') {
            this.$message.error('亲属关系为必选项')
          } else if (this.form.Image === '') {
            this.$message.error('个人头像为必传项')
          } else if (this.form.SignatureImage === '') {
            this.$message.error('签名图片为必传项')
          } else if (this.form.IdentityID === '') {
            this.$message.error('身份证正面图片为必传项')
          } else {
            try {
              this.loading = true
              await RegistrationForm.ManageAdd(this.form)
              this.handleClose('submitButton')
              this.loading = false
            } catch (err) {
              this.loading = false
            }
          }
        }

      })

    },

    //判断是否点击的是查询
    async judgeEditButton () {
      if (this.judgeId !== 0) {
        const res = await RegistrationForm.SearchModelDetails({ ID: this.judgeId })
        console.log(res)
        this.form = res
      }
    }
  }

}
</script>

<style scoped>
.dialog {
  position: relative;
}

.dialog-desc {
  position: absolute;
  top: 23px;
  left: 130px;
  font-weight: bold;
  color: #DC143C;
}

.span-box {
  display: flex;
}


.second-box {
  margin-left: 190px;
}

.sign-box {
  padding: 0 100px;
}


</style>
